<!doctype html>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <title>汽修管理系统-库存管理</title>
    <script src="/public/jquery/jquery-1.11.1.min.js"></script>
    <script src="/public/vue/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link href="/master/css/inventoryManage.css" rel="stylesheet"/>

    <style>
        body {
            margin: 0
        }

        #inven {
            line-height: 33px;
            margin-left: 7px;
            padding: 20px 0 20px 20px;
            font-weight: bold;
            font-size: 14px;
            font-family: "宋体";
            color: rgb(0, 0, 0);
            background: url("/stencil/images/titleico.png") left center no-repeat;
        }

        .el-form el-form--inline {
            padding: 6px 0 0 0;
        }

        .el-scrollbar li {
            height: 20px;
            line-height: 20px
        }

        #table-operate {
            padding-left: 15px;
            height: 37px;
            line-height: 37px;
            border: 1px solid #c1d3de;
            border-top: none;
            background: url("/stencil/images/toolbarbg.png") repeat-x;
        }

        .el-table thead {
            color: #606266
        }
    </style>
</head>
<body>
<div id="inventory">
    <span id="inven">库存管理</span>
    <el-button size="mini" type="success" icon="el-icon-search" style="position:absolute;top:3px;right:70px;">查询
    </el-button>

    <!-- 库存查询表单 -->
    <div>
        <el-form :inline="true" ref="form" :model="ruleForm" label-width="100px">
            <el-form-item label="配件名称：" prop="region">
                <el-select v-model="ruleForm.region" placeholder="轮胎">
                    <el-option label="刹车片" value="scp"></el-option>
                    <el-option label="车膜" value="cm"></el-option>
                    <el-option label="保险杠" value="bxg"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="供货商：" prop="region">
                <el-select v-model="ruleForm.region" placeholder="江南皮革厂">
                    <el-option label="酒钢" value="jg"></el-option>
                    <el-option label="浙宁皮草城" value="znpcc"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="账目状态：" prop="region">
                <el-select v-model="ruleForm.region" placeholder="未结账">
                    <el-option label="已结账" value="yjz"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
    </div>

    <div id="table-operate">
        <el-button type="text" style="padding: 8px;" @click="dialogFormVisible=true">
            <img title="新增弹窗" src="/stencil/images/addFrom.png"></img>
        </el-button>
    </div>

    <!-- 新增库存信息 -->
    <el-dialog title="新增库存信息" id="elDialog" :close-on-click-modal="false" :visible.sync="dialogFormVisible" style="border-radius:6px;">
        <el-form :inline="true" ref="addForm" :model="addForm" class="demo-input-suffix" label-width="100px">
            <el-form-item label="配件名称：">
                <el-input v-model="addForm.name" placeholder="请输入配件名称"></el-input>
            </el-form-item>
            <el-form-item label="数量：">
                <el-input v-model="addForm.num" placeholder="请输入配件数量"></el-input>
            </el-form-item>

            <el-form-item label="单价：">
                <el-input v-model="addForm.price" placeholder="请输入配件单价"></el-input>
            </el-form-item>

            <el-form-item label="供货商：" prop="region">
                <el-select v-model="addForm.ghs" placeholder="江南皮革厂">
                    <el-option label="酒钢" value="jg"></el-option>
                    <el-option label="浙宁皮草城" value="znpcc"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="账目状态：" prop="region">
                <el-select v-model="addForm.state" placeholder="未结账">
                    <el-option label="已结账" value="yjz"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="备注：" prop="region">
                <el-input v-model="addForm.remark" placeholder="备注信息"></el-input>
            </el-form-item>

            <el-form-item label="入库时间：">
                <el-date-picker id="picker" v-model="addForm.date" type="date" placeholder="请选择日期"></el-date-picker>
            </el-form-item>
        </el-form>
    </el-dialog>

    <!-- 数据展示表格 -->
    <div>
        <template>
            <el-table :data="tableData2" size="small" :header-cell-style="{background:'#E7F0F6'}" stripe border
                      style="width: 100%">
                <el-table-column prop="name" align="center" show-overflow-tooltip label="配件名称"
                                 width="180"></el-table-column>
                <el-table-column prop="num" align="center" show-overflow-tooltip label="数量"
                                 width="180"></el-table-column>
                <el-table-column prop="price" align="center" show-overflow-tooltip label="单价"
                                 width="180"></el-table-column>
                <el-table-column prop="ghs" align="center" show-overflow-tooltip label="供货商"
                                 width="180"></el-table-column>
                <el-table-column prop="state" align="center" show-overflow-tooltip label="账目状态"
                                 width="180"></el-table-column>
                <el-table-column prop="remark" align="center" show-overflow-tooltip label="备注"
                                 width="180"></el-table-column>
                <el-table-column prop="date" align="center" show-overflow-tooltip label="时间"
                                 width="220"></el-table-column>
            </el-table>
        </template>
    </div>
</div>
</body>
<script src="/master/js/inventoryManage.js" type="application/javascript"></script>
</html>